<template>
  <div class="container mx-auto px-4 py-8">
    <div class="max-w-4xl mx-auto">
      <h1 class="text-3xl font-bold text-gray-900 mb-8">个人中心</h1>

      <!-- 个人信息卡片 -->
      <div class="bg-white rounded-xl shadow-md p-6 mb-8">
        <div class="flex items-start space-x-6">
          <div class="relative">
            <img 
              :src="userStore.userInfo?.avatar || '/default-avatar.png'" 
              alt="用户头像"
              class="w-24 h-24 rounded-full object-cover"
            >
            <button 
              class="absolute bottom-0 right-0 bg-blue-600 text-white p-2 rounded-full hover:bg-blue-700"
              @click="handleAvatarUpload"
            >
              <font-awesome-icon :icon="['fas', 'camera']" />
            </button>
          </div>
          <div class="flex-1">
            <div class="flex justify-between items-start">
              <div>
                <h2 class="text-2xl font-semibold text-gray-900">{{ userStore.userInfo?.username }}</h2>
                <p class="text-gray-500">{{ userStore.userInfo?.email }}</p>
              </div>
              <button 
                class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700"
                @click="isEditMode = true"
              >
                编辑资料
              </button>
            </div>
            <div class="mt-4 grid grid-cols-3 gap-4 text-center">
              <div class="bg-gray-50 p-4 rounded-lg">
                <div class="text-2xl font-semibold text-blue-600">12</div>
                <div class="text-sm text-gray-500">已收藏景点</div>
              </div>
              <div class="bg-gray-50 p-4 rounded-lg">
                <div class="text-2xl font-semibold text-green-600">5</div>
                <div class="text-sm text-gray-500">已完成行程</div>
              </div>
              <div class="bg-gray-50 p-4 rounded-lg">
                <div class="text-2xl font-semibold text-purple-600">8</div>
                <div class="text-sm text-gray-500">发表评论</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 编辑个人信息模态框 -->
      <ModalDialog
        v-model="isEditMode"
        title="编辑个人资料"
      >
        <form @submit.prevent="handleProfileUpdate" class="space-y-4">
          <div>
            <label for="username" class="block text-sm font-medium text-gray-700">用户名</label>
            <input
              id="username"
              v-model="editForm.username"
              type="text"
              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
            >
          </div>
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700">邮箱</label>
            <input
              id="email"
              v-model="editForm.email"
              type="email"
              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
            >
          </div>
          <div class="flex justify-end space-x-3">
            <button
              type="button"
              class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50"
              @click="isEditMode = false"
            >
              取消
            </button>
            <button
              type="submit"
              class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"
            >
              保存
            </button>
          </div>
        </form>
      </ModalDialog>

      <!-- 我的收藏 -->
      <div class="bg-white rounded-xl shadow-md p-6 mb-8">
        <h3 class="text-xl font-semibold text-gray-900 mb-4">我的收藏</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <!-- 收藏的景点卡片 -->
        </div>
      </div>

      <!-- 我的行程 -->
      <div class="bg-white rounded-xl shadow-md p-6 mb-8">
        <h3 class="text-xl font-semibold text-gray-900 mb-4">我的行程</h3>
        <div class="space-y-4">
          <!-- 行程列表 -->
        </div>
      </div>

      <!-- 我的评论 -->
      <div class="bg-white rounded-xl shadow-md p-6">
        <h3 class="text-xl font-semibold text-gray-900 mb-4">我的评论</h3>
        <div class="space-y-4">
          <!-- 评论列表 -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'
import ModalDialog from '@/components/ui/ModalDialog.vue'

const userStore = useUserStore()
const isEditMode = ref(false)

const editForm = ref({
  username: userStore.userInfo?.username || '',
  email: userStore.userInfo?.email || ''
})

const handleAvatarUpload = () => {
  // TODO: 实现头像上传功能
  console.log('上传头像')
}

const handleProfileUpdate = async () => {
  try {
    // TODO: 实现个人资料更新功能
    console.log('更新个人资料', editForm.value)
    isEditMode.value = false
  } catch (error) {
    console.error('更新失败:', error)
  }
}
</script> 